<template>
  <div class="rating-page">
    <!-- 导航栏 -->
    <van-nav-bar title="打分" left-text="返回" left-arrow @click-left="goBack">
    </van-nav-bar>

    <!-- 内容区 -->
    <div class="content">
      <!-- 活动名称 -->
      <h1 class="event-name">{{ activityName }}</h1>

      <!-- 评分组件 -->
      <div class="rate-section">
        <p>请为活动评分：</p>
        <van-rate
          v-model="rating"
          size="4vh"
          color="#FFD700"
          void-color="#FFD700"
        ></van-rate>
      </div>

      <!-- 评价内容输入框 -->
      <div class="feedback-section">
        <p>请填写评价：</p>
        <van-field
          v-model="feedback"
          type="textarea"
          rows="5"
          maxlength="200"
          placeholder="请输入您的评价内容（最多200字）"
        />
      </div>

      <!-- 提交按钮 -->
      <div class="submit-section">
        <van-button
          type="primary"
          size="large"
          class="submit-button"
          @click="submitRating"
        >
          提交
        </van-button>
      </div>
    </div>
  </div>
</template>
  
  <script>
import activityApi from "@/api/activity.js";
import userApi from "@/api/userProfile.js";
export default {
  data() {
    return {
      eventId: "",
      activityName: "111", // 活动名称
      rating: 0, // 评分值
      feedback: "", // 评价内容
    };
  },
  mounted() {
    this.eventId = this.$route.query.id;
    this.getEventName();
  },
  methods: {
    getEventName() {
      activityApi.getEventDetail(this.eventId).then((res) => {
        this.activityName = res.name;
      });
    },
    // 返回上一个页面
    goBack() {
      this.$router.go(-1);
    },
    // 提交评分和评价
    async submitRating() {
      if (this.rating === 0) {
        this.$toast.fail("请先评分");
        return;
      }
      if (!this.feedback.trim()) {
        this.$toast.fail("请填写评价内容");
        return;
      }

      const data = {
        eventId: this.eventId,
        rating: this.rating,
        content: this.feedback.trim(),
      };

      try {
        // 等待 API 响应
        await userApi.scoreEvent(data);
        this.$toast.success("评分提交成功！");
        // 跳转到活动详情页
        this.$router.push({
          path: "/eventDetail",
          query: {
            id: this.eventId,
            role: "user", // 或 'organizer'，根据角色动态设置
          },
        });
      } catch (error) {
        // 提交失败，显示错误信息
        this.$toast.clear();
        this.$toast.fail("评分提交失败，请稍后重试");
        console.error(error);
      }
    },
  },
};
</script>
  
  <style scoped>

.van-nav-bar ::v-deep .van-nav-bar__text,
.van-nav-bar ::v-deep .van-nav-bar__title {
  color: white !important;
}

.van-nav-bar ::v-deep .van-nav-bar__arrow {
  color: white !important;
}
/* 页面整体样式 */
.rating-page {
  font-family: Arial, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7; /* 页面底色改为灰色 */
}

/* 导航栏样式 */
.van-nav-bar {
  height: 7vh;
  line-height: 7vh;
  background-color: #007aff; /* 导航栏颜色改为蓝色 */
  color: white;
}

/* 内容区样式 */
.content {
  flex: 1;
  padding: 2vh 4vh; /* 响应式内边距 */
  background-color: #f7f7f7; /* 内容区域背景色 */
}

/* 活动名称样式 */
.event-name {
  font-size: 3.5vh;
  font-weight: bold;
  text-align: center;
  margin-bottom: 4vh;
}

/* 评分区域样式 */
.rate-section {
  text-align: center;
  margin-bottom: 4vh;
}
.rate-section p {
  font-size: 2.5vh;
  margin-bottom: 1vh;
}

/* 评价输入框样式 */
.feedback-section {
  margin-bottom: 4vh;
}
.feedback-section p {
  font-size: 2.5vh;
  margin-bottom: 1vh;
}
.van-field__control {
  font-size: 2vh;
  background-color: #ffffff; /* 输入框背景色 */
  border-radius: 0.5vh; /* 圆角效果 */
}

/* 提交按钮区域样式 */
.submit-section {
  text-align: center;
}
.submit-button {
  width: 50%;
  height: 5vh;
  font-size: 2.5vh;
  background-color: #007aff; /* 提交按钮蓝色 */
  border-radius: 0.5vh; /* 圆角效果 */
}

/* 提交按钮 hover 效果 */
.submit-button:hover {
  background-color: #005bb5; /* 鼠标悬浮时，按钮颜色加深 */
}
</style>
  